// 通知管理器模块

/**
 * 显示成功提示模态框
 * @param {string} title 模态框标题
 * @param {string} message 模态框内容
 */
export function showSuccessModal(title, message) {
    const modalContainer = document.getElementById('success-modal');
    if (!modalContainer) {
        // 如果页面没有成功模态框，创建一个
        createSuccessModal();
    }
    
    const successModal = document.getElementById('success-modal');
    const modalTitle = document.getElementById('success-modal-title');
    const modalMessage = document.getElementById('success-modal-message');
    const closeBtn = document.getElementById('success-modal-close');
    
    if (!successModal || !modalTitle || !modalMessage || !closeBtn) return;
    
    // 设置模态框内容
    modalTitle.textContent = title;
    modalMessage.textContent = message;
    
    // 显示模态框
    successModal.classList.remove('hidden');
    document.body.classList.add('overflow-hidden');
    
    // 点击关闭按钮关闭模态框
    closeBtn.addEventListener('click', function() {
        closeSuccessModal();
    });
    
    // 点击模态框外部关闭
    successModal.addEventListener('click', function(e) {
        if (e.target === this) {
            closeSuccessModal();
        }
    });
    
    // 3秒后自动关闭
    setTimeout(closeSuccessModal, 3000);
}

/**
 * 关闭成功提示模态框
 */
export function closeSuccessModal() {
    const successModal = document.getElementById('success-modal');
    if (successModal) {
        successModal.classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
    }
}

/**
 * 创建成功提示模态框
 */
function createSuccessModal() {
    const modalHTML = `
    <div id="success-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4 transform transition-all">
            <div class="text-center">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto">
                    <i class="fa fa-check text-green-500 text-2xl"></i>
                </div>
                <h3 id="success-modal-title" class="text-xl font-bold mt-4 text-gray-800"></h3>
                <p id="success-modal-message" class="text-gray-600 mt-2"></p>
                <button id="success-modal-close" class="mt-6 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-md transition-colors">
                    确定
                </button>
            </div>
        </div>
    </div>
    `;
    document.body.insertAdjacentHTML('beforeend', modalHTML);
}

/**
 * 显示邮箱检查结果模态框
 * @param {boolean} emailExists 是否邮箱已存在
 */
export function showEmailCheckModal(emailExists) {
    const modalContainer = document.getElementById('email-check-modal');
    if (!modalContainer) {
        // 如果页面没有邮箱检查模态框，创建一个
        createEmailCheckModal();
    }
    
    const emailModal = document.getElementById('email-check-modal');
    const modalTitle = document.getElementById('email-modal-title');
    const modalMessage = document.getElementById('email-modal-message');
    const closeBtn = document.getElementById('email-modal-close');
    
    if (!emailModal || !modalTitle || !modalMessage || !closeBtn) return;
    
    // 根据检查结果设置模态框内容
    if (emailExists) {
        modalTitle.textContent = '邮箱已被使用';
        modalMessage.textContent = '您输入的邮箱地址已被其他用户使用，请尝试其他邮箱或使用已注册的邮箱登录。';
    } else {
        modalTitle.textContent = '邮箱可用';
        modalMessage.textContent = '您输入的邮箱地址可用，可以用于注册或修改账户信息。';
    }
    
    // 显示模态框
    emailModal.classList.remove('hidden');
    document.body.classList.add('overflow-hidden');
    
    // 点击关闭按钮关闭模态框
    closeBtn.addEventListener('click', function() {
        closeEmailCheckModal();
    });
    
    // 点击模态框外部关闭
    emailModal.addEventListener('click', function(e) {
        if (e.target === this) {
            closeEmailCheckModal();
        }
    });
}

/**
 * 关闭邮箱检查结果模态框
 */
export function closeEmailCheckModal() {
    const emailModal = document.getElementById('email-check-modal');
    if (emailModal) {
        emailModal.classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
    }
}

/**
 * 创建邮箱检查结果模态框
 */
function createEmailCheckModal() {
    const modalHTML = `
    <div id="email-check-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
            <h3 id="email-modal-title" class="text-xl font-bold text-gray-800"></h3>
            <p id="email-modal-message" class="text-gray-600 mt-2"></p>
            <div class="mt-6 flex justify-end">
                <button id="email-modal-close" class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-md transition-colors">
                    确定
                </button>
            </div>
        </div>
    </div>
    `;
    document.body.insertAdjacentHTML('beforeend', modalHTML);
}

/**
 * 显示顶部通知栏
 * @param {string} message 通知消息
 * @param {string} type 通知类型：success, error, warning, info
 */
export function showTopNotification(message, type = 'info') {
    const notificationId = 'top-notification';
    let notification = document.getElementById(notificationId);
    
    // 如果已有通知，先移除
    if (notification) {
        clearTimeout(notification.dataset.timeoutId);
        notification.remove();
    }
    
    // 创建新通知
    notification = document.createElement('div');
    notification.id = notificationId;
    
    // 设置样式和内容
    let bgColor = 'bg-blue-500';
    let icon = 'info-circle';
    
    switch (type) {
        case 'success':
            bgColor = 'bg-green-500';
            icon = 'check-circle';
            break;
        case 'error':
            bgColor = 'bg-red-500';
            icon = 'exclamation-circle';
            break;
        case 'warning':
            bgColor = 'bg-yellow-500';
            icon = 'exclamation-triangle';
            break;
    }
    
    notification.className = `fixed top-0 left-0 right-0 ${bgColor} text-white py-3 px-4 shadow-lg transform transition-all duration-300 translate-y-0 z-50 flex items-center justify-center`;
    notification.innerHTML = `
        <i class="fa fa-${icon} mr-2"></i>
        <span>${message}</span>
        <button class="ml-4 text-white hover:text-gray-200 transition-colors" id="notification-close">
            <i class="fa fa-times"></i>
        </button>
    `;
    
    // 添加到页面
    document.body.appendChild(notification);
    
    // 设置自动关闭
    const timeoutId = setTimeout(() => {
        removeTopNotification();
    }, 5000);
    notification.dataset.timeoutId = timeoutId;
    
    // 点击关闭按钮
    const closeBtn = document.getElementById('notification-close');
    if (closeBtn) {
        closeBtn.addEventListener('click', removeTopNotification);
    }
}

/**
 * 移除顶部通知栏
 */
function removeTopNotification() {
    const notification = document.getElementById('top-notification');
    if (notification) {
        notification.classList.add('translate-y-[-100%]');
        setTimeout(() => {
            notification.remove();
        }, 300);
    }
}